<template>
	<div>
		<a-descriptions class="descri labelRit">
			<a-descriptions-item label="版本说明">{{ pcConfig.pcVersionNote }} </a-descriptions-item>
			<!-- <a-descriptions-item label="三级系统名">{{ pcConfig.threeSystemName }} </a-descriptions-item> -->
			<a-descriptions-item label="关键字">{{ pcConfig.appInfoKeywords }} </a-descriptions-item>
			<a-descriptions-item label="是否鉴权">{{ pcConfig.isAuth == 1 ? '是' : '否' }} </a-descriptions-item>
			<a-descriptions-item label="是否单点">{{ pcConfig.isSinglepoint == 1 ? '是' : '否' }} </a-descriptions-item>
			<a-descriptions-item label="应用地址">{{ pcConfig.appUrl }} </a-descriptions-item>
			<a-descriptions-item label="单点地址">{{ pcConfig.singlepointUrl }} </a-descriptions-item>
			<a-descriptions-item label="应用简称">{{ pcConfig.appShortName }} </a-descriptions-item>
			<a-descriptions-item label="应用教程">{{ pcConfig.appTutorials }} </a-descriptions-item>
			<a-descriptions-item label="批量已阅地址">{{ pcConfig.batchReadUrl }} </a-descriptions-item>
		</a-descriptions>
		<a-descriptions class="descri labelRit">
			<a-descriptions-item label="待办所属分类">{{ type(pcConfig.pendingCategory) }} </a-descriptions-item>
			<a-descriptions-item label="待办稽核地址">{{ pcConfig.pendingDatasourceUrl }} </a-descriptions-item>
			<a-descriptions-item label="待办数据库类型">{{ pcConfig.pendingDatasourceType }} </a-descriptions-item>
			<a-descriptions-item label="待办数据库账号">{{ pcConfig.pendingDatasourceUsername }} </a-descriptions-item>
			<!-- <a-descriptions-item label="待办数据库密码">{{ pcConfig.pendingDatasourcePassword }} </a-descriptions-item> -->
			<a-descriptions-item label="待办核视图地址">{{ pcConfig.pendingTablename }} </a-descriptions-item>
			<a-descriptions-item label="待办对端系统管理人邮件">{{ pcConfig.pendingUserMail }} </a-descriptions-item>
		</a-descriptions>
		<a-descriptions class="descri labelRit">
			<a-descriptions-item label="待阅所属分类">{{ type(pcConfig.readingCategory) }} </a-descriptions-item>
			<a-descriptions-item label="待阅稽核地址">{{ pcConfig.readingDatasourceUrl }} </a-descriptions-item>
			<a-descriptions-item label="待阅数据库类型">{{ pcConfig.readingDatasourceType }} </a-descriptions-item>
			<a-descriptions-item label="待阅办数据库账号">{{ pcConfig.readingDatasourceUsername }} </a-descriptions-item>
			<!-- <a-descriptions-item label="待阅数据库密码">{{ pcConfig.readingDatasourcePassword }} </a-descriptions-item> -->
			<a-descriptions-item label="待阅核视图地址">{{ pcConfig.readingTablename }} </a-descriptions-item>
			<a-descriptions-item label="对端系统管理人邮件（待阅）">{{ pcConfig.readingUserMail }} </a-descriptions-item>
		</a-descriptions>
		<a-descriptions class="descri labelRit">
			<a-descriptions-item label="兼容性">{{ pcConfig.compatibility }} </a-descriptions-item>
			<a-descriptions-item label="认证状态">{{ authType(pcConfig.authType) }}</a-descriptions-item>
			<!-- <a-descriptions-item label="门户端应用上线时间">{{ pcConfig.pcOnlineTime }} </a-descriptions-item> -->
			<a-descriptions-item label="门户logo（存量）">
				<AuthImg class="img-item" :authSrc="pcLogo" />
			</a-descriptions-item>
		</a-descriptions>
		<a-descriptions class="descri labelRit">

			<a-descriptions-item label="网络打通截图" v-if="pcConfig?.intelPassPhoto">
				<div class="img-box">
					<AuthImg class="img-item" v-for="item in JSON.parse(pcConfig.intelPassPhoto)" :key="item.url"
						:authSrc="item.url" />
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="app设计页面" v-if="pcConfig?.appDesignPage">
				<div class="img-box">
					<AuthImg class="img-item" v-for="item in JSON.parse(pcConfig.appDesignPage)" :key="item.url"
						:authSrc="item.url" />
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="PC测试环境测试报告" v-if="pcConfig?.pcTestDoc">
				<div class="file-box">
					<div v-for="item in JSON.parse(pcConfig.pcTestDoc)" :key="item.url" @click="downloadFile(item)"
						class="file-item">
						<paper-clip-outlined style="margin-right: 5px" />{{ item.name }}
					</div>
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="PC生产环境测试报告" v-if="pcConfig?.pcProdTestDoc">
				<div class="file-box">
					<div v-for="item in JSON.parse(pcConfig.pcProdTestDoc)" :key="item.url" @click="downloadFile(item)"
						class="file-item">
						<paper-clip-outlined style="margin-right: 5px" />{{ item.name }}
					</div>
				</div>
			</a-descriptions-item>
		</a-descriptions>

		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
			<img alt="example" style="width: 100%" :src="imageUrl" />
		</a-modal>
	</div>
</template>

<script setup name="PcConfig">
import tool from '@/utils/tool'
import sysConfig from '@/config/index'
import { useRoute } from 'vue-router'
import AuthImg from '@/components/authImg/index.vue'
const route = useRoute()
const isTest = route.query.isTest
const datas = inject('detailDate')
// const pcConfig = isTest ? datas.value?.appInfoPcPropertiesAddParam : datas.value?.pcPropertiesList[0]
const pcConfig = datas.value?.appInfoPcPropertiesAddParam
const fileUrl = import.meta.env.VITE_FILE_URL_W
const pcLogo = computed(() => {
	let str = ''
	if (pcConfig.pcLogo.includes('group')) {
		str = `${sysConfig.FULL_URL}${pcConfig.pcLogo}`
	} else {
		str = `${fileUrl}/${JSON.parse(pcConfig.pcLogo)[0].url}`
	}
	return str
})

onMounted(() => {
	pcConfig.value = datas.value?.appInfoPcPropertiesAddParam
})


const showRea = computed(() => {
	let bool = false
	const approvalType = tool.session.get('approvalType')
	const doneStatus = tool.session.get('doneStatus')
	if ((approvalType === '0' || approvalType === '8') && !doneStatus) {
		bool = true
	}
	return bool
})
// 单选option
const radioOption = [
	{ label: '是', value: '1' },
	{ label: '否', value: '0' }
]
// 单选数据过滤
const filterRadio = (val) => {
	if (val) {
		const obj = radioOption.find((item) => item.value == val)
		return obj.label
	}
}
// 单选option
const authTypeOption = [
	{ label: '基本认证	', value: '1' },
	{ label: 'LTPA认证', value: '2' },
	{ label: '表单认证', value: '3' },
	{ label: '统一邮件认证', value: '4' }
]
const authType = (val) => {
	if (val) {
		const obj = authTypeOption.find((item) => item.value == val)
		return obj.label
	} else {
		return
	}
}
// 格式化密码
const filtPasword = (password) => {
	let str = ''
	if (password) {
		str = new Array(password.length).fill('*').join().replace(/,/g, '')
	}
	return str
}

const imageUrl = ref('')
let previewVisible = ref(false)
const handlePreview = (url) => {
	imageUrl.value = url
	previewVisible.value = true
}
const handleCancel = () => {
	previewVisible.value = false
}
const deType = [
	{ label: '采购', key: 'caigou' },
	{ label: '合同', key: 'hetong' },
	{ label: '报账', key: 'baoxiao' },
	{ label: '公文', key: 'gongwen' },
	{ label: '项目', key: 'program' },
	{ label: '关注', key: 'guanzhu' },
	{ label: '其他', key: 'others' },
]
const type = (value) => {
	if (value) {
		let json = deType.find(v => v.key == value)
		return json.label
	} else {
		return ''
	}

}
const downloadFile = (item) => {
	console.log('Token', tool.data.get('TOKEN'))
	// const fileUrl = import.meta.env.VITE_API_BASEURL
	const fileUrl = import.meta.env.VITE_FILE_URL
	const path = item.url.includes('http://') ? item.url : `${fileUrl}/${item.url}`
	const name = item.name
	const xhr = new XMLHttpRequest()
	xhr.open('get', path)
	xhr.setRequestHeader('Token', tool.data.get('TOKEN'))
	xhr.responseType = 'blob'
	xhr.send()
	xhr.onload = function () {
		if (this.status === 200 || this.status === 304) {
			const fileReader = new FileReader()
			fileReader.readAsDataURL(this.response)
			fileReader.onload = function () {
				const a = document.createElement('a')
				a.style.display = 'none'
				a.href = this.result
				a.download = name
				document.body.appendChild(a)
				a.click()
				document.body.removeChild(a)
			}
		}
	}
}
</script>

<style lang="less" scoped>
.descri {
	margin-top: 10px;
}

.img-sty {
	width: 104px;
	height: 104px;
	cursor: pointer;
}

.file-box {
	cursor: pointer;
}

:deep(.ant-input) {
	height: 35px;
}
</style>
